<template>
  <div class="footView">

    <slot name="text"></slot>
    <slot name="operation"></slot>
    <!-- <span>
      <i class="el-icon-date"></i>
      表头配置
    </span>
    <span>数据库：倪姐夏18年2</span> -->

    <p v-show="hasPagination">共 {{pagesNum}} 页</p>

    <el-pagination
      ref="pagination"
      v-show="hasPagination"
      class="pagination"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-count="pagesNum"
      :page-sizes="[20, 50, 100, 200]"
      :page-size="pageSize"
      layout="prev, pager, next, jumper, sizes">
    </el-pagination>
    
  </div>
</template>

<script>
export default {
  props: {
    pagesNum:{
      type: Number,
      default: 0
    },
    hasPagination: {
      type: Boolean,
      default: false
    },
    pageSize: {
      type: Number,
      default: 1
    },
    tableTypeChange: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    tableTypeChange(a,b){
      this.$refs.pagination.internalCurrentPage = 1
    }
  },
  methods: {
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.$emit('handleSizeChange', val)
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.$emit('handleCurrentChange', val)
    }
  }
}
</script>

<style scoped>
  /* 表尾 */
  .footView{
    background-color: white;
    height: 6vh;
    padding-left: 16px;
    padding-right: 16px;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: #f4f4f4 solid 2px;
  }
  
  .footView .pagination{
    float: right;
    width: auto;
    margin-top: 3vh;
    transform: translateY(-50%);
  }
  
  .footView p{
    color: rgb(112, 112, 112);
    line-height: 6vh;
    font-size: 14px;
    float: right;
  }
</style>

<style>
  .footView .el-pagination__editor .el-input{
    margin-top: 0;
  }
  .footView .el-pagination__editor.el-input .el-input__inner{
    width: 40px;
  }
  .footView .el-pagination .el-select .el-input .el-input__inner{
    width: 105px;
  }
  .footView .el-pagination .el-select .el-input{
    margin: 0 20px;
  }
</style>